<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>健康民生平台——报表</title>
		<script src="<%=path %>/static/manage-sys/js/jquery.min.js"></script>
		<script type="text/javascript" src="<%=path %>/resources/echarts/echarts.min.js"></script>
        <style>
            .main{min-width:1200px;text-align: center; margin: 0px auto;}
            #gauge1,#gauge2,#gauge3,canvas,#barReport{display:inline-block; }
            #gauge1,#gauge2,#gauge3{margin: 0px 0px;}
            
            .left,.right{ margin: 0px auto 25px auto; display:inline-block;vertical-align: top;}
            .right{margin-left: 12px;}
            .left .ybpData{padding: 10px 22px;text-align: center;display: inline-block;margin-bottom: 25px; }
            .left .zxtData{padding: 10px;text-align: center;display: inline-block;  }
            
            .borderR{border:1px solid #a5a5a5;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;box-shadow: 0px 0px 10px 5px #efefef;}
            table{width:100%;}
            .tbData{ width:1200px;margin:0px auto;}
            table,table thead tr,table thead tr td,table tfoot tr,table tfoot tr td{border-collapse: collapse;line-height: 30px;border:1px solid #333;font-size: 14px;}
            table tr td{ width:9%;}
            table tr th{line-height: 30px;background-color:#f7a590; font-size: 14px;width:10%;} 
            table tbody{height: 200px;overflow: hidden;overflow-y: scroll;}
 
            table.containData{border:0px;}
            table.containData tr{border-bottom: 1px solid #333;}
            table.containData tr td{border-right: 1px solid #333;font-size: 13px;width:111px; }
            table.containData tr td.leftTD{border-left: 0px;border-top: 0px; }
            table.containData tr td.rightTD{border-right:0px;border-top: 0px ;}
        </style>
	</head>
	<body >
        <div class="main">
	    <!--左侧数据框 -->
        <div class="left" style="width:660px;">
            <div class="ybpData borderR">
                <!-- 仪表盘1 审核数/领取数  -->
            <div id="gauge1" style="width: 185px;height:175px;"></div>
            <!-- <span><label id="g1_checkedCount"></label> / <label id="g1_receiveCount"></label></span> -->

            <!-- 仪表盘2  采样数/审核数  -->
            <div id="gauge2" style="width: 220px;height:200px;"></div>
            <!-- <span><label id="g2_useCount"></label> / <label id="g2_receiveCount"></label></span> -->

            <!-- 仪表盘3  审核数/出报告数  -->
            <div id="gauge3" style="width: 185px;height:175px;"></div>
            <!-- <span><label id="g3_reportCount"></label> / <label id="g3_useCount"></label></span> --> 
		
            <script type="text/javascript">
            $(document).ready(function(){
                var gaugeChart1 = echarts.init(document.getElementById('gauge1'));
                gaugeChart1.showLoading({
                  text : 'loading',
                  effect : 'whirling' 
                });

                var gaugeChart2 = echarts.init(document.getElementById('gauge2'));
                gaugeChart2.showLoading({
                  text : 'loading',
                  effect : 'whirling' 
                });

                var gaugeChart3 = echarts.init(document.getElementById('gauge3'));
                gaugeChart3.showLoading({
                  text : 'loading',
                  effect : 'whirling' 
                });
                
                /*var option = {"tooltip" : {"formatter": '{a} <br/>{b} : {c}%'},"toolbox": {"show": true,"x":'center', "feature": {"restore": {"show": true},"saveAsImage": {"show": true}}},"series": [{"name": '已审核数占比',"center":['50%','65%'], "type": 'gauge',"detail": {"formatter":'{value}%', "fontSize": 20,},"data": [{value: 3, "name": '已审核数占比'}],"radius": '100%',"title" : {"fontWeight": 'bolder',"fontSize": 12,"fontStyle": 'italic'},"axisLine": {"width": 5, "show": true,"lineStyle": { "color": [ [ 0.25,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{"offset": 1,"color": '#b45656'}], false) ],  [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ "offset": 1,"color": '#fb7575' }], false) ],[ 0.75,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{"offset": 1,"color": '#fbab5b'}], false) ],[1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {"offset": 0.2,"color": '#fbdb53' }], false) ]], "width": 17}},axisTick: {length:15,lineStyle:{color: 'auto'}},splitLine:{length: 20,lineStyle: {color:'auto'},}} ],};
                gaugeChart1.hideLoading();
                gaugeChart1.setOption(option);
                
                option = {"tooltip" : {"formatter": '{a} <br/>{b} : {c}%'},"toolbox": {"show": true,"x":'center',"feature": {"restore": {"show": true},"saveAsImage": {"show": true}}},"series": [{"name": '采样数占比',"center":['50%','65%'],"type": 'gauge',"detail": {"formatter":'{value}%', "fontSize": 20,},"data": [{value: 108, "name": '采样数占比'}],"radius": '100%',"title" : {"fontWeight": 'bolder',"fontSize": 12,"fontStyle": 'italic'},"axisLine": {"width": 5, "show": true,"lineStyle": { "color": [ [ 0.25,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{"offset": 1,"color": '#b45656'}], false) ],  [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ "offset": 1,"color": '#fb7575' }], false) ],[ 0.75,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{"offset": 1,"color": '#fbab5b'}], false) ],[1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {"offset": 0.2,"color": '#fbdb53' }], false) ]], "width": 17}},axisTick: {length:15,lineStyle:{color: 'auto'}},splitLine:{length: 20,lineStyle: {color:'auto'},}} ],};
                gaugeChart2.hideLoading();
                gaugeChart2.setOption(option);
                
                option = {"tooltip" : {"formatter": '{a} <br/>{b} : {c}%'},"toolbox": {"show": true,"x":'center',"feature": {"restore": {"show": true},"saveAsImage": {"show": true}}},"series": [{"name": '出报告数占比',"center":['50%','65%'],"type": 'gauge',"detail": {"formatter":'{value}%', "fontSize": 20,},"data": [{value: 0, "name": '出报告数占比'}],"radius": '100%',"title" : {"fontWeight": 'bolder',"fontSize": 12,"fontStyle": 'italic'},"axisLine": {"width": 5, "show": true,"lineStyle": { "color": [ [ 0.25,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{"offset": 1,"color": '#b45656'}], false) ],  [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ "offset": 1,"color": '#fb7575' }], false) ],[ 0.75,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{"offset": 1,"color": '#fbab5b'}], false) ],[1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {"offset": 0.2,"color": '#fbdb53' }], false) ]], "width": 17}},axisTick: {length:15,lineStyle:{color: 'auto'}},splitLine:{length: 20,lineStyle: {color:'auto'},}} ],};
                gaugeChart3.hideLoading();
                gaugeChart3.setOption(option); */

                 $.ajax({
                    url: "/csfy/report/findReportGauge.do",
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == '200') {
                            var option = eval("(" + data.rows.gauge1 + ")");
                            console.log("gauge1-->" + data.rows.gauge1);
                            gaugeChart1.hideLoading();
                            gaugeChart1.setOption(option);

                            option = eval("(" + data.rows.gauge2 + ")");
                            console.log("gauge2-->" + data.rows.gauge2);
                            gaugeChart2.hideLoading();
                            gaugeChart2.setOption(option);

                            option = eval("(" + data.rows.gauge3 + ")");
                            console.log("gauge3-->" + data.rows.gauge3);
                            gaugeChart3.hideLoading();
                            gaugeChart3.setOption(option);
                        }else {
                            alert("仪表盘数据查询错误");
                        }
                    },
                    error: function (err) {
                        alert('网络错误!');
                    }

                }); 
            });
            </script>
            </div>            

            <div class="zxtData borderR">
                 <!-- 折线图  -->
            <div id="brokenLine" style="width: 630px;height:200px;margin: 0px auto;"></div>
            <script type="text/javascript">
            $(document).ready(function(){
                var brokenLineChart = echarts.init(document.getElementById('brokenLine'));
                brokenLineChart.showLoading({
                  text : 'loading',
                  effect : 'whirling' 
                });
                
                /*var option = {title: {text: '最近十二天的数据情况', textStyle:{fontSize: 13}},tooltip: {trigger: 'axis'},legend: {data:['领券数','审核数','采样数','报告数']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['04-25','04-24','04-23','04-22','04-21','04-20','04-19','04-18','04-17','04-16','04-15','04-14','04-13']},yAxis: {type: 'value'},series: [{name:'领券数',type:'line',data: [0,1,1,20,5,2,2,198,1,0,0,0,0],itemStyle:{color: '#b45656'}},{name:'审核数',type:'line',data: [0,0,0,0,0,0,0,0,0,0,0,0,0],itemStyle:{color: '#fb7575'}},{name:'采样数',type:'line',data: [0,1,0,17,2,1,1,0,0,0,0,0,0],itemStyle:{color: '#fbab5b'}},{name:'报告数',type:'line',data: [0,0,0,0,0,0,0,0,0,0,0,0,0],itemStyle:{color: '#fbdb53'}}]};
                brokenLineChart.hideLoading();
                brokenLineChart.setOption(option);
                */

                 $.ajax({
                    url: "/csfy/report/findBrokenLine.do",
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == '200') {
                            var option = eval("(" + data.rows + ")");
                            console.log("brokenLine-->" + data.rows);
                            brokenLineChart.hideLoading();
                            brokenLineChart.setOption(option);
                        }else {
                            alert("折线图查询错误");
                        }
                    },
                    error: function (err) {
                        alert('网络错误!');
                    }

                }); 
            });
            </script>
            </div>
           
		</div>
        
         <!--右侧数据框 -->
        <div class="right borderR" style="width:520px;padding: 5px;">
            <!-- 柱状图  -->
		<div id="barReport" style="width: 500px;height:460px;"></div>
		<script type="text/javascript">
			var barChart = document.getElementById("barReport");
			var myChart = echarts.init(barChart);
			myChart.showLoading({
			　　text : 'loading',
			　　effect : 'whirling' 
			});
			
			var app = {};
			option = null;
			var posList = [
			    'left', 'right', 'top', 'bottom',
			    'inside',
			    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
			    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
			];
	
			app.configParameters = {
			    rotate: {
			        min: -90,
			        max: 90
			    },
			    align: {
			        options: {
			            left: 'left',
			            center: 'center',
			            right: 'right'
			        }
			    },
			    verticalAlign: {
			        options: {
			            top: 'top',
			            middle: 'middle',
			            bottom: 'bottom'
			        }
			    },
			    position: {
			        options: echarts.util.reduce(posList, function (map, pos) {
			            map[pos] = pos;
			            return map;
			        }, {})
			    },
			    distance: {
			        min: 0,
			        max: 100
			    }
			};
	
			app.config = {
			    rotate: 90,
			    align: 'left',
			    verticalAlign: 'middle',
			    position: 'insideBottom',
			    distance: 15,
			    onChange: function () {
			        var labelOption = {
			            normal: {
			                rotate: app.config.rotate,
			                align: app.config.align,
			                verticalAlign: app.config.verticalAlign,
			                position: app.config.position,
			                distance: app.config.distance
			            }
			        };
			        myChart.setOption({
			            series: [{
			                label: labelOption
			            }, {
			                label: labelOption
			            }, {
			                label: labelOption
			            }, {
			                label: labelOption
			            }]
			        });
			    }
			};
	
	
			var labelOption = {
			    normal: {
			        show: true,
			        position: app.config.position,
			        distance: app.config.distance,
			        align: app.config.align,
			        verticalAlign: app.config.verticalAlign,
			        rotate: app.config.rotate,
			        formatter: '{c}  {name|{a}}',
			        fontSize: 16,
			        rich: {
			            name: {
			                textBorderColor: '#fff'
			            }
			        }
			    }
			};
			
			
			
			 $(document).ready(function(){

				 /*var option = {color: ['#b45656', '#fb7575', '#fbab5b', '#fbdb53'],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['领券数','审核数','采样数','报告数']}, toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {mark: {show: true},dataView: {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,xAxis: [{type: 'category',axisTick: {show: false},data: ['耳聋基\n因检测','NIP\nT检测','HPV检测','产前血\n清学筛查','新生儿\n疾病筛查','地中海\n贫血基因检测'],axisLabel: { interval:0,  textStyle:{fontSize:12},rotate:40 } }],yAxis: [{type: 'value'}], series: [{name: '领券数',type: 'bar',barGap: 0,label: labelOption,data: [1485,1905,967,1493,1568,408]}, {name: '审核数', type: 'bar',label: labelOption,data: [3,196,1,0,0,0]},{name: '采样数', type: 'bar',label: labelOption,data: [0,201,0,0,0,0]},{name: '报告数', type: 'bar',label: labelOption,data: [0,0,0,0,0,0]}]};  

					myChart.hideLoading();
		        	myChart.setOption(option);*/
				   $.ajax({
	                url: "/csfy/report/findBarReport.do",
	                type: "post",
	                dataType: "json",
	                success: function (data) {
	                    if (data.code == '200') {
	                    	console.log(data);
	                    	var option = eval("(" + data.rows + ")");
	                    	console.log("BarReport-->" + data.rows);
	                    	myChart.hideLoading();
	                    	myChart.setOption(option);
	                    }else {
	                    	alert("柱状图查询错误");
	                    }
	                },
	                error: function (err) {
	                    alert('网络错误!');
	                }
	
	            });
			});
		</script>
        </div>
		
			
		<!-- 详细数据 表格 -->
        <div class="tbData borderR">        
		  <table border="1" style="width:96%;margin: 20px auto;">
			<thead>
				<tr>
					<th>省</th>
					<th>市</th>
					<th>县/区</th>
					<th>乡镇/街道</th>
					<th style="width:13%;">产品名称</th>
					<th>检测机构</th>
					<th>优惠券领取数</th>
					<th>已审核数</th>
					<th>采样数</th>
					<th>已出报告数</th>
				</tr>
			</thead>
              
			<tbody >
                <tr>
                <td colspan="10">
                    <div style="height:160px;width:1152px; overflow: hidden;overflow-y: scroll;">
                    
                 <table style="width:101.5%;border:0px; " class="containData">
                    <c:set var="totalReceiveCount" value="0"/>
				<c:set var="totalCheckCount" value="0"/>
				<c:set var="totalUseCount" value="0"/>
				<c:set var="totalReportCount" value="0"/>
				<c:forEach items="${reportTableList }" varStatus="status" var="reportTable">
					<c:set var="totalReceiveCount" value="${reportTable.receiveCount + totalReceiveCount }"/>
					<c:set var="totalCheckCount" value="${reportTable.checkCount + totalCheckCount }"/>
					<c:set var="totalUseCount" value="${reportTable.useCount + totalUseCount }"/>
					<c:set var="totalReportCount" value="${reportTable.reportCount + totalReportCount }"/>
					<tr>
						<td class="leftTD">${reportTable.province }</td>
						<td>${reportTable.city }</td>
						<td>${reportTable.country }</td>
						<td>${reportTable.town }</td>
						<td style="width:145px;">${reportTable.productName }</td>
						<td>${reportTable.checkInstitution }</td>
						<td>${reportTable.receiveCount }</td>
						<td>${reportTable.checkCount }</td>
						<td>${reportTable.useCount }</td>
						<td class="rightTD">${reportTable.reportCount }</td>
					</tr>
				</c:forEach>
                    </table>
                        </div>
                    </td>
                </tr>
				
			</tbody>
			<tfoot>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>合计：</td>
					<td><c:out value="${totalReceiveCount }"/></td>
					<td><c:out value="${totalCheckCount }"/></td>
					<td><c:out value="${totalUseCount }"/></td>
					<td><c:out value="${totalReportCount }"/></td>
				</tr>
			</tfoot>
		</table>
        </div>
        
		
		<!-- 地图  -->
		<!-- <div id="mapReport" style="width: 800px;height:700px;"></div> -->
		<!-- <script type="text/javascript">
		$(document).ready(function(){
			var app = {};
	    	$.get('<%=path%>/resources/echarts/mapjson/430100.json', function (cSjson) {  
		        echarts.registerMap('长沙', cSjson);  
		        var mapReportChart = echarts.init(document.getElementById('mapReport'));  
		        mapReportChart.showLoading({
				　　text : 'loading',
				　　effect : 'whirling' 
				});
			
				$.ajax({
	                url: "/csfy/report/findMapReport.do",
	                type: "post",
	                dataType: "json",
	                success: function (data) {
	                    if (data.code == '200') {
	                    	var option = eval("(" + data.rows + ")");
	                    	console.log(data.rows);
	                    	mapReportChart.hideLoading();
	                    	mapReportChart.setOption(option);
	                    }else {
	                    	alert("长沙地图查询错误");
	                    }
	                },
	                error: function (err) {
	                    alert('网络错误!');
	                }
	
	            });
			});
		});
		</script>  -->
        </div>
	</body>
</html>